<!-- src/views/HomePage.vue -->
<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <HeaderComponent />

    <!-- 主体区域 -->
    <div class="main-content">
      <!-- 左侧导航栏 -->
      <SideMenuComponent />

      <!-- 右侧内容区 -->
      <div class="right-content">
        <!-- 轮播图区域 -->
        <CarouselComponent />

        <!-- 热门课程区域 -->
        <HotCoursesComponent />
      </div>
    </div>
  </div>
</template>

<script setup>
import HeaderComponent from '@/components/HeaderComponent.vue'
import SideMenuComponent from '@/components/SideMenuComponent.vue'
import CarouselComponent from '@/components/CarouselComponent.vue'
import HotCoursesComponent from '@/components/HotCoursesComponent.vue'
</script>

<style scoped>
.home-container {
  padding: 20px;
}
.main-content {
  display: flex;
  margin-top: 20px;
}
.right-content {
  flex: 1;
  margin-left: 20px;
}
</style>